import React from 'react';
import {
	Box,
	Stack,
	Tabs, 
	TabList, 
	TabPanels,
	Tab,
	TabPanel,
} from '@chakra-ui/react';
import SignIn from './component/sign-in.js';  
import SignUp from './component/sign-up.js';  

export default function HomePage() {

	return (
		<Stack w="100%" bg="#f1f1f1" align="center" py="40px">
			<Stack w="400px" borderRadius="4px" align="center" bg="#fff" pt="50px" pb="30px" boxShadow="0 0 8px rgba(0,0,0,.1)">
				<Box w="300px">
					<Tabs isFitted defaultIndex={1}>
						<Box w="180px" mx="auto" mb="50px">
							<TabList>
								<Tab color="#969696" fontSize="18px" fontWeight="700" _focus={{boxShadow: 'none'}} _active={{boxShadow: 'none'}} _selected={{color: "#ea6f5a", borderColor: "#ea6f5a"}}>登录</Tab>
								<Tab color="#969696" fontSize="18px" fontWeight="700" _focus={{boxShadow: 'none'}} _active={{boxShadow: 'none'}} _selected={{color: "#ea6f5a", borderColor: "#ea6f5a"}}>注册</Tab>
							</TabList>
						</Box>
						<TabPanels>
							<TabPanel p="0px">
								<SignIn></SignIn>
							</TabPanel>
							<TabPanel p="0px">
								<SignUp></SignUp>
							</TabPanel>
						</TabPanels>
					</Tabs>
				</Box>
			</Stack>
		</Stack>
	)
}
